﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Expense Management</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="icon" href="../../Content/images/favicon.ico" type="image/x-icon" />
    <link href="../../Content/css/admin-forms.min.css" rel="stylesheet" />
    <link href="../../Content/themes/theme.css" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <!--Page header starts here-->
        <header class="navbar undefined bg-info navbar-fixed-top">
            $PageHeader$
        </header>
        <!--Page header ends here-->
        <!--Page side menu starts here-->
        <aside id="sidebar_left" class="nano nano-light affix">
            $PageSideMenu$
        </aside>
        <!--Page side menu ends here-->
        <section id="content_wrapper">
            <!--Page top bar starts here-->
            <header id="topbar" class="alt">
                $PageTopbar$
            </header>
            <!--Page top bar ends here-->
            <!--Page content starts here-->
            <section id="content" class="table-layout animated fadeIn">
                <div class="tray tray-center">

                    <div class="tray-inner">
                        $PageContent$
                    </div>
                </div>
            </section>
            <!--Page content ends here-->
            <!-- Begin: Page Footer-->
            <footer id="content-footer" class="affix">
                <div class="row">
                    <div class="col-xs-6"><span class="footer-legal"><span id="Span1">2016</span> by TemplateMonster</span></div>
                    <div class="col-xs-6 text-right"><a href="#content" class="footer-return-top"><span class="fa fa-angle-up"></span></a></div>
                </div>
            </footer>
        </section>
    </div>
</body>
</html>
<script src="../../Content/Scripts/jquery-1.4.4.min.js"></script>
<script src="../../Content/Scripts/core.min.js"></script>
<!-- Theme Javascript-->
<script src="../../Content/Scripts/utility.js"></script>
<script src="../../Content/Scripts/demo.js"></script>
<script src="../../Content/Scripts/main.js"></script>
<!-- Widget Javascript-->
<script src="../../Content/Scripts/widgets.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        "use strict";
        // Init Demo JS
        Demo.init();
        // Init Theme Core
        Core.init();
        demoHighCharts.init();
        runVectorMaps();
        $(window).trigger('resize');
        // Init plugins for ".calendar-widget"
        // plugins: FullCalendar
        //
        $('#calendar-widget').fullCalendar({
            header: {
                right: ' prev,next,today,month,agendaWeek,agendaDay'
            },
            editable: true,
            events: [{
                title: 'ALL Day event',
                start: '2016-02-2',
                end: '2016-02-2',
                className: 'fc-event-warning'
            },
              {
                  title: 'ALL DAY EVENT',
                  start: '2016-03-11',
                  end: '2016-03-11',
                  className: 'fc-event-warning'
              },
              {
                  title: 'Sony Meeting',
                  start: '2016-05-2',
                  end: '2016-05-2',
                  className: 'fc-event-warning'
              },

              {
                  title: 'Conference',
                  start: '2016-05-11',
                  end: '2016-05-13',
                  className: 'fc-event-info'
              },

              {
                  title: 'LONG EVENT',
                  start: '2016-03-21',
                  end: '2016-03-23',
                  className: 'fc-event-info'
              }
            ],
            eventRender: function (event, element) {
                // create event tooltip using bootstrap tooltips
                $(element).attr("data-original-title", event.title);
                $(element).tooltip({
                    container: 'body',
                    delay: {
                        "show": 100,
                        "hide": 200
                    }
                });
                // create a tooltip auto close timer
                $(element).on('show.bs.tooltip', function () {
                    var autoClose = setTimeout(function () {
                        $('.tooltip').fadeOut();
                    }, 3500);
                });
            }
        });
        // Init plugins for ".task-widget"
        // plugins: Custom Functions + jQuery Sortable
        //
        var taskWidget = $('div.task-widget');
        var taskItems = taskWidget.find('li.task-item');
        var currentItems = taskWidget.find('ul.task-current');
        var completedItems = taskWidget.find('ul.task-completed');
        // Init jQuery Sortable on Task Widget
        taskWidget.sortable({
            items: taskItems, // only init sortable on list items (not labels)
            handle: '.task-menu',
            axis: 'y',
            connectWith: ".task-list",
            update: function (event, ui) {
                var Item = ui.item;
                var ParentList = Item.parent();
                // If item is already checked move it to "current items list"
                if (ParentList.hasClass('task-current')) {
                    Item.removeClass('item-checked').find('input[type="checkbox"]').prop('checked', false);
                }
                if (ParentList.hasClass('task-completed')) {
                    Item.addClass('item-checked').find('input[type="checkbox"]').prop('checked', true);
                }
            }
        });
        // Custom Functions to handle/assign list filter behavior
        taskItems.on('click', function (e) {
            e.preventDefault();
            var This = $(this);
            var Target = $(e.target);
            if (Target.is('.task-menu') && Target.parents('.task-completed').length) {
                This.remove();
                return;
            }
            if (Target.parents('.task-handle').length) {
                // If item is already checked move it to "current items list"
                if (This.hasClass('item-checked')) {
                    This.removeClass('item-checked').find('input[type="checkbox"]').prop('checked', false);
                }
                    // Otherwise move it to the "completed items list"
                else {
                    This.addClass('item-checked').find('input[type="checkbox"]').prop('checked', true);
                }
            }
        });

        var sparkBars = $('.inlinesparkbars');

        var sparkColors = {
            "primary": [bgPrimary, bgPrimaryLr, bgPrimaryDr],
            "info": [bgInfo, bgInfoLr, bgInfoDr],
            "warning": [bgWarning, bgWarningLr, bgWarningDr],
            "success": [bgSuccess, bgSuccessLr, bgSuccessDr],
            "alert": [bgAlert, bgAlertLr, bgAlertDr]
        };
        // Init Sparkbars
        if (sparkBars.length) {

            var sparkbarInit = function () {
                $('.inlinesparkbars').each(function (i, e) {
                    var This = $(this);
                    var Color = sparkColors["primary"];
                    var Height = '120';
                    This.children().remove();
                    // default color is "primary"
                    // Color[0] = default shade
                    // Color[1] = light shade
                    // Color[2] = dark shade
                    //alert('hi')
                    // User assigned color and height, else default
                    var userColor = This.data('spark-color');
                    var userHeight = This.data('spark-height');

                    if (userColor) {
                        Color = sparkColors[userColor];
                    }
                    if (userHeight) {
                        Height = userHeight;
                    }
                    $(e).sparkline('html', {
                        type: 'bar',
                        barWidth: 5,
                        barSpacing: 2,
                        height: Height,
                        zeroAxis: false,
                        barColor: Color[0]
                    });
                });
            }

            // Refresh Sparklines on Resize
            var refreshSparkbars;

            $(window).resize(function (e) {
                clearTimeout(refreshSparkbars);
                refreshSparkbars = setTimeout(sparkbarInit, 500);
            });

            sparkbarInit();
        }

        var highColors = [bgSystem, bgSuccess, bgWarning, bgPrimary];
        // Chart data
        var seriesData = [{
            name: 'Phones',
            data: [0, 9, 17, 22, 19, 11.5, 5.2, 9, 17, 22, 19, 11.5, 5.2, 9, 17, 22, 19, 11.5, 5.2]
        }];
        var ecomChart = $('#ecommerce_chart1');
        if (ecomChart.length) {
            ecomChart.highcharts({
                chart: {
                    type: 'areaspline',
                    marginTop: 30,
                    backgroundColor: 'transparent',
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: ''
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    gridLineColor: '#f0f2f6',
                    gridLineWidth: 2,
                    labels: {
                        formatter: function () {
                            return this.value;
                        },
                        style: {
                            color: '#d1d4da',
                            "textTransform": "uppercase",
                            "fontSize": "12px",
                            "letterSpacing": 0.02
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    labels: {
                        overflow: 'justify',
                        style: {
                            color: '#d1d4da',
                            "textTransform": "uppercase",
                            "fontSize": "10px",
                            "letterSpacing": 0.02
                        },
                        y: 30
                    },
                    lineWidth: 0,
                    tickWidth: 0,
                    formatter: function () {
                        return this.value; // clean, unformatted number for year
                    }
                },
                tooltip: {
                    valueSuffix: ' $'
                },
                plotOptions: {
                    areaspline: {
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        marker: {
                            enabled: false
                        },
                        pointInterval: 86400000, // one day
                        pointStart: Date.UTC(2016, 3, 31, 0, 0, 0)
                    }
                },
                series: [{
                    name: 'Hestavollane',
                    showInLegend: false,
                    lineColor: 'rgba(0,0,0,0)',
                    fillColor: {
                        linearGradient: {
                            x1: 0, y1: 0,
                            x2: 0, y2: 1
                        },
                        stops: [[0.0, '#5ddcff'],
                          [0.5, '#5ddcff'],
                          [1.0, '#5cbbe3']]
                    },
                    data: [0, 850, 900, 1200, 1500, 1000, 1300, 1500, 2300, 2500, 2600, 2200, 3000, 3600, 3500, 2500, 2000, 0]

                }],
                navigation: {
                    menuItemStyle: {
                        fontSize: '10px'
                    }
                }
            });


            $('#ecommerce_chart1-new-data').click(function (e) {
                e.preventDefault();
                $('.chart-1').removeClass('active-default')
                $(this).addClass('active-success');

                var chart = $('#ecommerce_chart1').highcharts();
                chart.series[0].setData([0, 850, 900, 1200, 1100, 1000, 1200, 1400, 2200, 2300, 2600, 2200, 2700, 3100, 3000, 2400, 2000, 0]);
            });

            $('#ecommerce_chart1-new-data-2').click(function (e) {
                e.preventDefault();
                $('.chart-1').removeClass('active-success');
                $(this).addClass('active-default');

                var chart = $('#ecommerce_chart1').highcharts();
                chart.series[0].setData([0, 450, 800, 1300, 1600, 1200, 1100, 1500, 2300, 2400, 2500, 2500, 2800, 2300, 2100, 1500, 1300, 300]);
            });
        }

        var seriesData2 = [{
            name: 'Phones',
            data: [5.0, 9, 17, 22, 19, 11.5, 5.2, 9.5, 11.3, 15.3, 19.9, 24.6]
        }];

        var ecomChart2 = $('#ecommerce_chart2');
        if (ecomChart2.length) {
            ecomChart2.highcharts({
                chart: {
                    zoomType: 'x',
                    backgroundColor: 'transparent',
                },
                credits: false,
                title: {
                    text: ''
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    gridLineColor: '#f0f2f6',
                    gridLineWidth: 2,
                    labels: {
                        formatter: function () {
                            return this.value;
                        },
                        style: {
                            color: '#d1d4da',
                            "textTransform": "uppercase",
                            "fontSize": "12px",
                            "letterSpacing": 0.02
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    categories: ['Jan', 'Feb', 'Mar', 'Apr',
                      'May', 'Jun', 'Jul', 'Aug',
                      'Sep', 'Oct', 'Nov', 'Dec'
                    ],
                    tickWidth: 0,
                    lineWidth: 0,
                    labels: {
                        overflow: 'justify',
                        style: {
                            color: '#d1d4da',
                            "textTransform": "uppercase",
                            "fontSize": "10px",
                            "letterSpacing": 0.02
                        },
                        y: 30
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                              [0, 'rgba(67, 199, 215, .7)'],
                              [0.5, 'rgba(67, 199, 215, .3)'],
                              [1, 'rgba(67, 199, 215, 0)']
                            ]
                        },
                        marker: {
                            radius: 6,
                            lineWidth: 4,
                            lineColor: '#fff'
                        },
                        lineWidth: 3,
                        threshold: null
                    }
                },

                series: [{
                    type: 'area',
                    name: 'Orders',
                    data: [0, 1400, 900, 1200, 1500, 1000, 1300, 1500, 2900, 2500, 2600, 2200],
                    color: '#43c7d7'
                }]
            });

            $('#ecommerce_chart2-new-data').click(function (e) {
                e.preventDefault();
                $('.filter-range').removeClass('bg-whitesmoke');
                $(this).addClass('bg-whitesmoke');

                var chart = $('#ecommerce_chart2').highcharts();
                chart.series[0].setData([0, 1400, 900, 1200, 1500, 1000, 1300, 1500, 2900, 2500, 2600, 2200]);
            });

            $('#ecommerce_chart2-new-data-2').click(function (e) {
                e.preventDefault();
                $('.filter-range').removeClass('bg-whitesmoke');
                $(this).addClass('bg-whitesmoke');

                var chart = $('#ecommerce_chart2').highcharts();
                chart.series[0].setData([1400, 1200, 0, 900, 1500, 1300, 1000, 2900, 1500, 2600, 2500, 2200]);
            });

            $('#ecommerce_chart2-new-data-3').click(function (e) {
                e.preventDefault();
                $('.filter-range').removeClass('bg-whitesmoke');
                $(this).addClass('bg-whitesmoke');

                var chart = $('#ecommerce_chart2').highcharts();
                chart.series[0].setData([100, 400, 900, 1100, 1500, 1400, 1600, 1100, 2000, 2100, 1600, 2000]);
            });
        }

        var ecomChart3 = $('#ecommerce_chart3');
        if (ecomChart3.length) {
            ecomChart3.highcharts({
                chart: {
                    zoomType: 'x',
                    backgroundColor: 'transparent',
                },
                credits: false,
                title: {
                    text: ''
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    gridLineColor: '#f0f2f6',
                    gridLineWidth: 0,
                    tickWidth: 0,
                    lineWidth: 0,
                    labels: {
                        enabled: false
                    }
                },
                xAxis: {
                    labels: {
                        enabled: false
                    },
                    tickWidth: 0,
                    lineWidth: 0,
                    gridLineWidth: 0
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                              [0, 'rgba(67, 199, 215, .7)'],
                              [0.5, 'rgba(67, 199, 215, .3)'],
                              [1, 'rgba(67, 199, 215, 0)']
                            ]
                        },
                        marker: {
                            radius: 3,
                            lineWidth: 0,
                            lineColor: '#fff'
                        },
                        lineWidth: 2,
                        threshold: null
                    }
                },

                series: [{
                    type: 'area',
                    name: 'Orders',
                    data: [0, 1400, 900, 1200, 1500, 1000, 1300, 1500, 2900, 2500, 2600, 2200],
                    color: '#43c7d7'
                }]
            });
        }
        // Widget VectorMap
        function runVectorMaps() {
            // Jvector Map Plugin
            var runJvectorMap = function () {
                // Data set
                var mapData = [900, 700, 350, 500];
                // Init Jvector Map
                $('#WidgetMap').vectorMap({
                    map: 'world_mill_en',
                    backgroundColor: 'transparent',
                    series: {
                        markers: [{
                            attribute: 'r',
                            scale: [3, 7],
                            values: mapData
                        }]
                    },
                    regionStyle: {
                        initial: {
                            fill: '#eaedf1'
                        },
                        hover: {
                            fill: bgInfo
                        }
                    },
                });
                // Manual code to alter the Vector map plugin to
                // allow for individual coloring of countries
                var states = ['DE', 'US', 'CA', 'FR', 'HU'];

                var colors = [bgInfo, bgInfo, bgInfo, bgInfo, bgInfo];
                var colors2 = [bgInfo, bgInfo, bgInfo, bgInfo, bgInfo];
                $.each(states, function (i, e) {
                    $("#WidgetMap path[data-code=" + e + "]").css({
                        fill: colors[i]
                    });
                });
                $('#WidgetMap').find('.jvectormap-marker')
                        .each(function (i, e) {
                            $(e).css({
                                fill: colors2[i],
                                stroke: colors2[i]
                            });
                        });
            }
            if ($('#WidgetMap').length) {
                runJvectorMap();
            }
        }
    });
</script>
